<template>
    <div class="white-box">
        <div class="table-mb">
            <el-button type="primary" @click="handleAdd">添加</el-button>
            <el-button type="default" plain @click="allDel">批量删除</el-button>
        </div>
        <div class="task-one">
            <div class="task-one__item">
                <span class="task-one__label">文章标题：</span>
                <el-input placeholder="输入文章标题" v-model.trim="search_text" size="default" clearable></el-input>
            </div>
            <div class="task-one__btn clearfix">
                <el-button type="primary" :loading="search_btn" :icon="Search" @click="handleSearch">搜索</el-button>
            </div>
        </div>

        <el-table
            class="table-mb"
            v-loading="loading"
            :data="arr_data"
            :header-cell-style="{ background: '#F5F7FA' }"
            element-loading-background="rgba(255, 255, 255, 0.6)"
            @selection-change="handleAllSelected"
        >
            <el-table-column type="selection" width="55" />
            <el-table-column prop="article_id" label="文章ID" width="80"> </el-table-column>
            <el-table-column prop="title" label="标题" min-width="180"> </el-table-column>
            <el-table-column prop="cate_title" label="分类"> </el-table-column>
            <el-table-column label="是否隐藏">
                <template #default="{ row }">
                    <span>{{ row.hidden == 0 ? "显示" : "隐藏" }}</span>
                </template>
            </el-table-column>
            <el-table-column label="状态">
                <template #default="{ row }">
                    <span class="status-text" v-if="row.audit == 0">待审核</span>
                    <span class="status-text" v-else>{{ row.audit == 1 ? "已通过" : "已拒绝" }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="order_by" label="排序"> </el-table-column>
            <el-table-column prop="on_time_label" label="发布时间" width="160"> </el-table-column>
            <el-table-column label="操作" width="160" fixed="right">
                <template #default="{ row }">
                    <el-button class="theme-btn" link type="primary" @click="handleEdit(row.article_id,row.cate_id)">编辑</el-button>
                    <el-popconfirm
                        title="确定删除此管理员吗？"
                        confirm-button-text="确定"
                        cancel-button-text="取消"
                        @confirm="handleDelete(row)"
                        v-if="row.article_id > 9"
                    >
                        <template #reference>
                            <el-button class="theme-btn" link type="primary" style="margin-left: 14px">删除</el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>

        <el-pagination
            background
            v-model:current-page="page"
            v-model:page-size="pageSize"
            :page-sizes="pageSizeNum"
            :total="totalNums"
            layout="total, sizes, prev, pager, next, jumper"
        >
        </el-pagination>

        <go-back />
    </div>
</template>

<script setup>
import { getCurrentInstance, ref, onMounted, watch } from "vue"
import OneLoad from "@mixins/one-load"
import { useRouter } from "vue-router"
import { Search } from "@element-plus/icons-vue"
import GoBack from "@components/GoBack.vue"

const router = useRouter()
const { proxy } = getCurrentInstance()

onMounted(() => {
    getList()
})

/**
 * minxin列表加载
 */
const { page, pageSizeNum, pageSize, loading, arr_data, totalNums, search_text, search_btn, pubParams, pubRefreshParams, getdata } = OneLoad()

// 切换每页显示条数
watch(pageSize, (val) => {
    page.value = 1
    pubParams(getList)
})
// 跳转第几页
watch(page, (val) => {
    pubParams(getList)
})

function getList() {
    let params = {
        page: page.value,
        limit: pageSize.value,
        so: search_text.value,
    }
    getdata("article/index", params)
}

const handleSearch = () => {
    search_btn.value = true
    pubRefreshParams(getList)
}

// 删除单个
const handleDelete = (row) => {
    postDel(row.article_id)
}
// 删除多个
const ids = ref([])
const handleAllSelected = (val) => {
    let arrs = []
    for (let i = 0; i < val.length; i++) {
        arrs.push(val[i].article_id)
    }
    ids.value = arrs
}
const allDel = () => {
    if (ids.value.length == 0) {
        proxy.$message({ message: "请选择需要删除的数据", type: "warning" })
        return
    }
    for (let i = 0; i < ids.value.length; i++) {
        if (ids.value[i] <= 8) {
            proxy.$message({ message: "系统内置文章不能删除！", type: "warning" })
            return
        }
    }
    postDel(ids.value)
}

// 删除接口
function postDel(params) {
    proxy.$axios
        .post("article/delete", {
            article_id: params,
        })
        .then((res) => {
            if (res.data.code == 0) {
                pubParams(getList)
            } else {
                proxy.$message({ message: res.data.msg, type: "error" })
            }
        })
        .catch((err) => {})
}

// 添加
const handleAdd = () => {
    router.push("/News/NewsAdd")
}
// 编辑
const handleEdit = (eid,cid) => {
    router.push({
        path: "/News/NewsEdit",
        query: {
            eid,
            cid
        },
    })
}
</script>
<script>
export default {
    name: "NewsList",
}
</script>

<style lang="less" scoped>
.status-text {
    color: @themes;
}
</style>
